<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <kerwin-input type="text" title="姓名" v-model="username"></kerwin-input>
        <kerwin-input type="name" title="年龄" v-model="age"></kerwin-input>
        <kerwin-input type="password" title="密码" v-model="password"></kerwin-input>


        <button @click="handleSubmit">提交</button>
        <button @click="handleReset">清空</button>
    </div>
    
    <script type="text/javascript"> 
        Vue.component("kerwinInput", {
            // 传入的必须是value值
            props: ["type", "title", "value"],
            template:`
            <div>
                <label>{{ title }}</label> 
                <input :type="type" style="background:red"
                @input="handleInput" :value="value"/>
            </div>
            `,
            methods: {
                handleInput(evt) {
                    this.$emit("input", evt.target.value)

                }
            },
        })
    var vm = new Vue({
        el:"#box",
        data: {
            liShow: false,
            username:"default",
            age: 0, 
            password:"default password"
        },
        methods: {
            handleSubmit(){
                console.log(this.username, this.age, this.password)
            },
            handleReset(){
                this.username = ""
                this.age = 0
                this.password =""
            }
        }
    })


    </script>
</body>
</html>